<!-- 问题反馈 -->
<template>

  <div class="pag" >
    <form autocomplete="on">
      <div class="q-input">
        <input type="text" placeholder="请一句话简述你的问题···" maxlength="20" v-model="title">
        <span>{{ title.length }}/20</span>
      </div>
      <div class="q-area">
        <textarea placeholder="请描述您的问题详情，若文字无法讲述清楚，可在下方添加图片辅助说明。" maxlength="100" v-model="content"></textarea>
        <span>{{ content.length }}/100</span>
      </div>
      <div class="upload-items" ref="uploadItems">
        <cube-upload
          class="upload-item"
          action="/index.php?g=api/mission&m=index&a=upload_suggest_pic"
          v-model="urls"
          @files-added="filesAdded" v-for="(item, i) in files" v-if="i < 4">
          <cube-upload-file :file="urls[i]" :key="i" v-if="urls.length > i"
                            class="cube-upload-file-cust"></cube-upload-file>
          <cube-upload-btn :multiple="false" v-else>
            <div class="upload-bg"></div>
          </cube-upload-btn>
        </cube-upload>
      </div>
      <div class="btn-sub" @click="submit">提交反馈</div>
      <router-link class="fq" to="/fq">常见问题</router-link>
    </form>
    <div v-if="isIOS">
      <a class="entry" @click="goTaskWall">任务墙入口</a>
      <a class="relogin" @click="$refs.login.show()" v-if="token">重新登陆</a>
    </div>
    <cube-popup type="my-popup" ref="login" maskClosable v-if="isIOS">
      <div class="login-form">
        <div class="content">
          <h2>任务墙登陆</h2>
          <div class="m-form">
            <form autocomplete target="iform" action="" ref="form1">
              <div class="f-input">
                <label>账号</label>
              </div>
              <div class="f-input">
                <input type="text" placeholder="邮箱/昵称" v-model="pwdForm.name" name="name" >
              </div>
              <div class="f-input">
                <label>密码</label>
              </div>
              <div class="f-input">
                <input type="password" v-model="pwdForm.pwd" placeholder="请输入登录密码" name="pwd">
              </div>
              <button class="lg-btn" @click.prevent="pwdLogin">登录</button>
            </form>
          </div>
        </div>
      </div>
    </cube-popup>
  </div>

</template>

<script>
  import Vue from 'vue'
  import { versions } from 'common/js/utl'
  import {
    Upload
  } from 'cube-ui';
  Vue.use(Upload)
  import { submitFeedBack, loginByPwd } from 'api/task'

  export default {
    data() {
      return {
        pwdForm: {
          name: '',
          pwd: ''
        },
        isIOS: versions.ios,
        printOut: '',
        uid: '',
        token: '',
        title: '',
        content: '',
        urls: []
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.uid = to.query.uid || localStorage.getItem('tt_uid')
        vm.token = to.query.token || localStorage.getItem('tt_token')

      })
    },
    computed: {
      files(){
        return [""].concat(this.urls)
      }
    },
    mounted(){

    },
    methods: {
      pwdLogin(){
        let {name, pwd} = this.pwdForm
        if(!name.trim()){
          return
        }
        if(!pwd){
          return
        }
        if(this.ispwdLogining){
          return
        }
        this.ispwdLogining = true
        loginByPwd({
          registration_id: '',
          account: name,
          password: pwd
        })
          .then(({data})=>{
            this.$refs.login.hide()
            this.ispwdLogining = false
            this.pwdForm = {
              name: '',
              pwd: ''
            }
            localStorage.setItem('tt_token', data.token)
            localStorage.setItem('tt_uid', data.uid)
            this.token = data.token
            this.uid = data.uid
            this.goTaskWall()
          })
          .catch(e=>{
            this.ispwdLogining = false
              this.$createToast({
                time: 3000,
                type: 'warn',
                //mask: true,
                txt: e.info || '提交失败'
              })
          })

      },
      goTaskWall(){
        let {uid, token} = this
        if(this.token){
          location.href = `./task.html#/?uid=${uid}&token=${token}`
        }else{
          this.$refs.login.show()
        }

      },
      filesAdded(files) {
        let hasIgnore = false
        let file = files["0"]
        if(file.type == 'image/jpeg' || file.type == 'image/png'){

        }else{
          file.ignore = true
          this.$createToast({
            type: 'warn',
            time: 2000,
            txt: '图片格式需要是png/jpeg'
          }).show()
          return
        }
        const maxSize = 1 * 1024 * 1024 // 1M
        for (let k in files) {
          const file = files[k]
          if (file.size > maxSize) {
            file.ignore = true
            hasIgnore = true
          }
        }
        hasIgnore && this.$createToast({
          type: 'warn',
          time: 2000,
          txt: '图片超过1M了'
        }).show()
      },
      resetForm(){
        this.title= ''
        this.content = ''
        this.urls = []
      },
      submit(){
        let {uid, token, title, content, urls} = this
        if(!title.length){
          return this.$createToast({
            time: 3000,
            type: 'warn',
            //mask: true,
            txt:  '请简述一句问题'
            //txt: JSON.stringify(e)
          }).show()
        }
        if(!content.length){
          return this.$createToast({
            time: 3000,
            type: 'warn',
            //mask: true,
            txt:  '请描述问题详情'
            //txt: JSON.stringify(e)
          }).show()
        }
        if(this.isSubmiting){
          return
        }
        this.isSubmiting = true
        submitFeedBack({
          uid,
          accesskey: '519f9cab85c8059d17544947k361a827',
          content,
          title,
          url: urls.map(it=>{
            // return it.response.data.ext.replace('..', '')
            return it.response.data.pic
          }).join()
        })
          .then(()=>{
            this.isSubmiting = false
            this.$createToast({
              time: 3000,
              type: 'warn',
              //mask: true,
              txt:  '提交成功,感谢您的反馈'
              //txt: JSON.stringify(e)
            }).show()
            this.resetForm()
           // setTimeout(()=>{
           //   history.back()
           // }, 3000)
          })
          .catch(e=>{
            this.isSubmiting = false
            this.$createToast({
              time: 3000,
              type: 'warn',
              //mask: true,
              txt:  e.info || '提交失败'
              //txt: JSON.stringify(e)
            }).show()
          })


      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    background: #fff;
    height: 100%;
    text-align: center;
    padding: 22px 20px;
    form {
      color: #98A3B5;
      font-size: 14px;
      input,textarea {
        color: #98A3B5;
      }
    }
  }

  .q-input {
    width: 100%;
    height:40px;
    border:1px solid rgba(152, 162, 180, 1);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 16px;
    padding-right: 11px;
    input {
      flex: 1;
      border: none;
      outline: none;
      &::placeholder {
        color: #98A3B5;
      }
    }
  }

  .q-area {
    width: 100%;
    height:172px;
    padding: 12px 13px;
    border:1px solid rgba(152, 162, 180, 1);
    margin-bottom: 22px;
    textarea {
      display: block;
      border: none;
      outline: none;
      width: 100%;
      height: 100%;
      margin-bottom: -1.2em;
      overflow:hidden;
      resize:none;
      line-height: 1.5;
      &::placeholder {
        color: #98A3B5;
      }
      -webkit-appearance: textfield;
    }
    span {
      display: block;
      text-align: right;
    }
  }

  .upload-items {
    display: flex;
    height: 66px;
    margin-bottom: 61px;
    .upload-item:last-of-type {
      margin-right: 0;
    }
  }

  .upload-item {
    width: 66px;
    height: 100%;
    margin-right: 22px;
  }

  .cube-upload-btn {
    //min-width: 66px;
    width: 100%;
    height: 100%;
    overflow: visible;
    //background: #eaeaea;
  }




  .upload-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url("~assets/images/task/upload-bg.png") no-repeat center center;
    background-size: contain;
  }

  .btn-sub {
    color: #fff;
    width:184px;
    height:40px;
    line-height: 40px;
    background:rgba(74,144,226,1);
    border-radius:4px;
    display: block;
    margin: 0 auto 23px auto;
  }

  .fq {
    color: #4A90E2;
  }



</style>
<style lang="scss">
  .cube-upload-file-cust {
    .cube-upload-file-def {
      width: 66px;
      height: 66px;
    }
  }

  .entry {
    display: inline-block;
    color: #4a90e2;
    margin-top: 30px;
  }

  .relogin {
    color: #4a90e2;
    margin-right: calc(-4em - 20px);
    margin-left: 20px;
  }


  .login-form {
    width: 275px;
    text-align: left;
    h2 {
      text-align: center;
      color: #fff;
      font-size: 20px;
      margin-bottom: 20px;
    }
  }


  .m-form {
    color: #333;
    font-size: 15px;
  }

  .f-input {
    margin-bottom: 5px;
    label {
      color: #fff;
      display: inline-block;
      text-indent: .6em;
    }
    input {
      color: #333;
      width: 100%;
      height:50px;
      border:2px solid rgba(227,227,227,1);
      border-radius:8px;
      text-indent: .6em;
      margin-bottom: 5px;
    }
  }


  .lg-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:50px;
    background:rgba(74,116,232,1);
    /*font-size: 30px;*/
    color: #fff;
    margin-top: 20px;
    border: none;
    outline: none;
  }





</style>
